
<template>
  <div class="thumb-example" v-if="this.$store.state.data">
    <!-- swiper1 -->
    <swiper class="swiper gallery-top" :options="swiperOptionTop" ref="swiperTop" id="lbt">
      <swiper-slide v-for="(item,index) in this.$store.state.data" :key="index">
        <div class="lbtTop">{{item.stadium}}</div>
        <div class="lbtUp">
          <img :src="/pic&video/+item.pic" alt="" class="lbtUp">
          <p>{{item.info}}</p>
        </div>
      </swiper-slide>

    </swiper>
    <!-- swiper2 Thumbs -->
    <swiper class="swiper gallery-thumbs" :options="swiperOptionThumbs" ref="swiperThumbs">
      <swiper-slide v-for="(item,index) in this.$store.state.data" :key="index"><img :src="/pic&video/+item.pic" alt="" class="lbtDown"></swiper-slide>
    </swiper>
  </div>
</template>

<script>
  import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
  import 'swiper/css/swiper.css'
  export default {
    name: 'swiper-example-thumbs-gallery',
    title: 'Thumbs gallery with Two-way control',
    components: {
      Swiper,
      SwiperSlide
    },
    data() {
      return {
        data:[],
        swiperOptionTop: {
          loop: true,
          loopedSlides: 5, // looped slides should be the same
          spaceBetween: 10,
        },
        swiperOptionThumbs: {
          loop: true,
          loopedSlides: 5, // looped slides should be the same
          spaceBetween: 10,
          centeredSlides: true,
          slidesPerView: 'auto',
          touchRatio: 0.2,
          slideToClickedSlide: true
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        const swiperTop = this.$refs.swiperTop.$swiper
        const swiperThumbs = this.$refs.swiperThumbs.$swiper
        swiperTop.controller.control = swiperThumbs
        swiperThumbs.controller.control = swiperTop
      })
    },
  }
</script>

<style scoped>
  #lbt{
    height: 23vh;
  }
  .lbtTop{
    background-image: url('/area/stadium_back.png');
    background-size: 5% auto;
    background-repeat: no-repeat;
    padding-left: 1.3rem;
    margin-bottom: 3px;
  }
  .lbtUp{
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    height: 18vh;
  }
  
  .lbtUp img{
    width: 38.5%;
  }
  .lbtUp p{
    font-size: 4vw;
    width: 60.5%;
    overflow: hidden;
    text-overflow:ellipsis;
    line-height: 2.5vh;
    color: black;
  }
  .lbtDown{
    width: 100%;
  }
  .thumb-example {
    height: 300px;
  }

    .swiper-slide {
      background-size: cover;
      background-position: center;
    }


    .gallery-top {
      height: 80%;
      width: 100%;
    }
    .gallery-thumbs {
      height: 20%;
      box-sizing: border-box;
    }
    .gallery-thumbs .swiper-slide {
      width: 33%;
      height: 100%;
      opacity: 0.4;
    }
    .gallery-thumbs .swiper-slide-active {
      opacity: 1;
    }
</style>